<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>

<canvas id="physics-canvas" width="600" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
    const canvas = document.getElementById('physics-canvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // Parameters for positioning
    // P is the top vertex of the right-angled triangle
    const p = { x: 300, y: 100 };
    // 'a' is the length of the equal sides of the triangle, in pixels
    const a_pixels = 180;
    // 'd' is the horizontal and vertical distance from P to the other vertices
    const d = a_pixels / Math.sqrt(2);

    // Coordinates for the two wires I1 and I2
    const i1 = { x: p.x - d, y: p.y + d };
    const i2 = { x: p.x + d, y: p.y + d };

    // --- Draw Wires (I1 and I2) ---
    function drawWire(pos, label) {
        const wireRadius = 8;
        const dotRadius = 2.5;

        // Draw the outer circle of the wire
        ctx.beginPath();
        ctx.arc(pos.x, pos.y, wireRadius, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the center dot (representing current coming out of the page)
        ctx.beginPath();
        ctx.arc(pos.x, pos.y, dotRadius, 0, 2 * Math.PI);
        ctx.fill();

        // Draw the label (e.g., I₁) below the wire
        ctx.font = 'italic 20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText(label, pos.x, pos.y + wireRadius + 5);
    }

    drawWire(i1, 'I₁');
    drawWire(i2, 'I₂');

    // --- Draw Point P ---
    ctx.beginPath();
    ctx.arc(p.x, p.y, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('P', p.x, p.y - 5);

    // --- Draw Dashed Lines from P to wires ---
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(i1.x, i1.y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(i2.x, i2.y);
    ctx.stroke();
    ctx.restore();

    // --- Draw Right-Angle Symbol at P ---
    const s = 15; // Size of the symbol's arms
    // Calculate the points for the L-shaped symbol
    const p1_on_line = { x: p.x - s / Math.sqrt(2), y: p.y + s / Math.sqrt(2) };
    const p2_on_line = { x: p.x + s / Math.sqrt(2), y: p.y + s / Math.sqrt(2) };
    const corner = { x: p.x, y: p.y + s * Math.sqrt(2) }; // The corner vertex of the L-shape

    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.moveTo(p1_on_line.x, p1_on_line.y);
    ctx.lineTo(corner.x, corner.y);
    ctx.lineTo(p2_on_line.x, p2_on_line.y);
    ctx.stroke();

    // --- Draw distance labels 'a' ---
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = 'black';

    // Midpoint of line P-I1
    const mid1 = { x: (p.x + i1.x) / 2, y: (p.y + i1.y) / 2 };
    // Midpoint of line P-I2
    const mid2 = { x: (p.x + i2.x) / 2, y: (p.y + i2.y) / 2 };

    const offset = -20; // Perpendicular offset for the label

    // Label for left line (P-I1). The line has an angle of 135 degrees.
    ctx.save();
    ctx.translate(mid1.x, mid1.y);
    ctx.rotate(135 * Math.PI / 180);
    ctx.fillText('a', 0, offset);
    ctx.restore();

    // Label for right line (P-I2). The line has an angle of 45 degrees.
    ctx.save();
    ctx.translate(mid2.x, mid2.y);
    ctx.rotate(45 * Math.PI / 180);
    ctx.fillText('a', 0, offset);
    ctx.restore();

    // --- Draw Bottom Label ---
    ctx.font = '20px "SimSun", "Songti SC"';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('习题 8-9 图', canvas.width / 2, canvas.height - 20);

</script>

</body>
</html>